<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-07 17:03:53
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-06-28 11:08:02
 * @FilePath: /com.huizhouyiren.web.d0101/src/views/email/components/popupInfo.vue
 * @Description: 信息弹窗组件
-->
<script setup>
import { ref } from 'vue'
let showModal = ref(false)

defineProps({
  title: {
    type: String
  },
  useButton: {
    type: Boolean,
    default: true
  },
  useDefaultButton: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: 'system.confirmText'
  },
  cancelText: {
    type: String,
    default: 'system.cancelText'
  },
  comfirmDisable: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '25rem'
  },
  btnWidth: {
    type: String,
    default: '5.625rem'
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['confirmHandle', 'cancelHandle'])

/**
 * @description: 打开弹窗
 * @return {*}
 */
const openModal = function () {
  showModal.value = true
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const closeModal = function () {
  showModal.value = false
}
/**
 * @description: 点击取消按钮
 * @return {*}
 */
const cancel = () => {
  showModal.value = false
  emit('cancelHandle')
}
/**
 * @description: 点击确认按钮触发的事件
 * @return {*}
 */
const confirm = () => {
  emit('confirmHandle')
}
defineExpose({
  openModal,
  closeModal
})
</script>
<template>
  <n-modal v-model:show="showModal">
    <n-card
      :style="{ width, maxWidth: '1000px' }"
      :title="title"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <slot></slot>
      <template #footer>
        <div v-if="useButton" class="flex items-center justify-end w-full">
          <slot name="button"></slot>
          <n-button
            type="default"
            v-if="useDefaultButton"
            class="mr-4"
            :style="{ btnWidth }"
            @click="cancel"
            >{{ $t(cancelText) }}</n-button
          >
          <slot name="button_center"></slot>
          <n-button
            :loading="loading"
            type="primary"
            v-if="useDefaultButton"
            :style="{ btnWidth }"
            @click="confirm"
            :disabled="comfirmDisable"
            >{{ $t(confirmText) }}</n-button
          >
          <slot name="button_right"></slot>
        </div>
      </template>
    </n-card>
    <!-- <div class="flex flex-col w-full rounded" style="width: 400px">
      <div
        class="flex items-center justify-center w-full px-4 font-bold border-b border-solid border-borderColor"
        style="height: 60px"
      >
        {{ $t(title) }}
      </div>
      <div class="p-4 py-8">
        <slot></slot>
      </div>
    </div> -->
  </n-modal>
</template>
